<!--
 * @Author: 小陆同学 1361176289@qq.com
 * @Date: 2024-06-24 08:58:56
 * @LastEditors: 小陆同学 1361176289@qq.com
 * @LastEditTime: 2024-08-15 11:11:20
 * @FilePath: \loCode\src\components\prLabel\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="prLabel" ref="prLabelRef" :style="style">
		<div class="prLabel-label">{{ title }}:</div>
		<div class="prLabel-text">{{ text }}</div>
	</div>
</template>

<script setup>
	import { watch, ref, nextTick } from 'vue';

	const props = defineProps({
		// 内容
		title: {
			type: [String, Number],
			default: '标题'
		},
		// 内容
		text: {
			type: [String, Number],
			default: '标签内容'
		},
		// 标题样式
		style: {
			type: Object,
			default: () => {
				return {};
			}
		}
	});

	const emits = defineEmits(['updateText']);

	const prLabelRef = ref('');

	watch(
		() => props.text,
		() => {
			nextTick(() => {
				emits('updateText', {
					width: prLabelRef.value.clientWidth,
					height: prLabelRef.value.clientHeight,
					ref: prLabelRef.value
				});
			});
		}
	);
</script>

<style lang="scss" scoped>
	.prLabel {
		all: unset;
		display: flex;
		align-items: center;
		font-size: 12px;
		user-select: none;
		width: max-content;

		&-text {
			flex: 1;
		}
	}
</style>
